<section>
  <h2>Single selection</h2>
  <p>Select your favorite color</p>

  <mat-form-field>
    <mat-label>Colors</mat-label>
    <mat-select [(ngModel)]="selectedColor">
      <mat-option *ngFor="let color of colors" [value]="color.value">
        {{ color.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Multiple selection</h2>
  <p>Pick toppings for your pizza</p>

  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select [(ngModel)]="selectedTopping" multiple>
      <mat-option *ngFor="let topping of toppings" [value]="topping.value">
        {{ topping.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Grouped options</h2>
  <p>Pick your Pokemon</p>

  <mat-form-field>
    <mat-label>Pokemon</mat-label>
    <mat-select [(ngModel)]="selectedPokemon">
      <mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
        <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
          {{ creature.label }}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</section>

<section>
  <h2>Colors</h2>

  <div class="demo-select-a11y-spacer">
    <mat-form-field  color="primary">
      <mat-label>ZIP code</mat-label>
      <mat-select>
        <mat-option value="2000">2000</mat-option>
        <mat-option value="2100">2100</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-label>State</mat-label>
      <mat-select>
        <mat-option value="alaska">Alaska</mat-option>
        <mat-option value="alabama">Alabama</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="warn">
      <mat-label>Language</mat-label>
      <mat-select>
        <mat-option value="english">English</mat-option>
        <mat-option value="spanish">Spanish</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div class="demo-select-a11y-spacer">
    <mat-form-field color="primary">
      <mat-label>Digimon</mat-label>
      <mat-select multiple>
        <mat-option value="mihiramon">Mihiramon</mat-option>
        <mat-option value="sandiramon">Sandiramon</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="accent">
      <mat-label>Drink</mat-label>
      <mat-select multiple>
        <mat-option value="water">Water</mat-option>
        <mat-option value="coke">Coke</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field color="warn">
      <mat-label>Theme</mat-label>
      <mat-select multiple>
        <mat-option value="light">Light</mat-option>
        <mat-option value="dark">Dark</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</section>
